<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header
        style="
          font-size: 40px;
          color: #409eff;
          background-color: rgb(238, 241, 246);
        "
        >---北斗定点智能垃圾分拣机器人产品实时追踪平台---
      </el-header>

      <el-container>
        <el-aside width="100px">
          <i class="el-icon-edit"></i>
        </el-aside>

        <el-container>
          <el-main>
<el-steps :active="3" align-center>
  <el-step title="故障反馈" icon="el-icon-edit"></el-step>
  <el-step title="点击提交"  icon="el-icon-thumb"></el-step>
  <el-step title="反馈成功" icon="el-icon-check"></el-step>
</el-steps>

<el-input v-model="msg" placeholder="请输入您在使用时遇到的问题（不超过50字）"></el-input>

              <el-button type="primary" round @click="submit">提交</el-button>
          </el-main>

          <el-footer
            style="
              font-size: 20px;
              color: #e6a23c;
              background-color: rgb(238, 241, 246);
            "
            >---感谢您的宝贵意见！---
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';
  export default {
    data () {
      return {
        msg: "",
      };
    },
    methods: {
      async submit() {
        try {
          // 从本地存储中获取 JWT 令牌
          // const jwtToken = localStorage.getItem('jwtToken'); 
          const response = await axios.post('http://localhost:9000/feedback', {
            msg: this.msg
          }, {
            //  将 JWT 令牌添加到请求头中
            // headers: {
            //   'Authorization': 'Bearer ' + jwtToken 
            // }
          });
          if (response.data.msg == "success") {
            this.$alert('反馈成功！', '提示', {
            confirmButtonText: '确定',
          });
          } else {
            alert('反馈失败，请稍后重试~');
          }
        } 
        catch (error) {
          console.error('反馈出错:', error);
          alert('反馈失败，请稍后重试');
        }     
      }
    }
  };
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body >.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5).el-aside,
.el-container:nth-child(6).el-aside {
  line-height: 260px;
}

.el-container:nth-child(7).el-aside {
  line-height: 320px;
}
</style>